<template>
  <!-- 搜索框 -->
  <view class="diy-search">
    <view class="inner">
      <view class="search-input">
		<icon type="search" size="15" style="padding-top:15rpx"/>
		<input style="height:60rpx;line-height: 60rpx;" @confirm="onTargetSearch" type="text" v-model="searchText" confirm-type="search" placeholder="请输入商品或店铺名" />
		<icon type="clear" size="15" @click="clearSearch" style="padding-top:15rpx;flex:1;text-align: right;"/>
	  </view>
    </view>
  </view>
</template>

<script>
  export default {
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {},
	data(){
		return{
			searchText:''
		}
	},
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
      /**
       * 跳转到搜索页面
       */
		onTargetSearch() {
			this.$emit('searchHandle',this.searchText)
		},
		clearSearch(){
			this.searchText=""
			this.$emit('searchHandle',"")
		}
    }
  }
</script>

<style lang="scss" scoped>
  .diy-search {
    background: #f1f1f2;
    padding: 20rpx 20rpx;
    font-size: 26rpx;
  }

  .inner {
    height: 60rpx;
    background: #fff;
    overflow: hidden;

    &.radius {
      border-radius: 10rpx;
    }

    &.round {
      border-radius: 60rpx;
    }
  }

  .search-input {
    color: #999;
    padding: 0 20rpx;
	display: flex;

    .search-icon {
      margin-right: 8rpx;
    }
  }
</style>
